import React from "react";
import "./index.scss";
import classNames from "classnames";
import { inject, observer } from "mobx-react";
import { IChannel } from "src/interfaces";

interface AllChannelType {
  list: any[];
  setIsOpened: Function;
  curIndex: number;
  setCurIndex: Function;
}

export const CommonList = ({
  list,
  setIsOpened,
  curIndex,
  setCurIndex,
}: AllChannelType) => {
  return (
    <ul className="menu-list">
      {list?.map((item: any, index: number) => {
        return (
          <li
            className={classNames("menu-item ellipsis", {
              "common-active": index === curIndex,
            })}
            key={item?.name || item?.title}
            onClick={async () => {
              await setCurIndex(index);
              await setIsOpened(false);
            }}
          >
            {item?.name || item?.title}
          </li>
        );
      })}
    </ul>
  );
};
